
// 首页业务

//调用用户名
renderUser()

//调用鉴权函数
checkLogin()

//退出业务
logout()

//渲染统计数据
async function getData() {

    const { data: { overview, year, salaryData, groupData, provinceData } } = await axios('/dashboard')

    //调用函数 渲染概览数据
    render0verview(overview)

    //薪资走势
    renderYear(year)


    //薪资分布
    renderSalary(salaryData)

    //男女薪资分布
    const nan = []
    const nv = []
    const datas = []
    salaryData.map(item => {
        const num1 = { value: item.b_count, name: item.label }
        nan.push(num1)
        const num2 = { value: item.g_count, name: item.label }
        nv.push(num2)
    })
    datas.push(nan, nv)
    renderSalarynan(datas)

    //每组薪资
    renderGroup(groupData)

    //地图
    renderProvince(provinceData)
}
getData()

//1.概览函数 -overview
function render0verview(overview) {
    Object.keys(overview).forEach((key) => {
        document.querySelector(`.${key}`).innerHTML = overview[key]
    })
}

//2.薪资走势 -year
function renderYear(year) {
    const mychart = echarts.init(document.querySelector('#line'))
    const option = {
        //标题
        title: {
            text: '2022全学科薪资走势',
            left: 10,
            top: 10,
            textStyle: {
                fontSize: 20
            }
        },
        //x轴
        xAxis: {
            type: 'category',
            data: year.map(item => item.month)
        },
        //y轴
        yAxis: {
            type: 'value',
        },
        //系列图标
        series: [
            {
                //渲染数据
                data: year.map(item => item.salary),
                type: 'line',
                smooth: true,
                //标记大小
                symbolSize: '10',
                //线条样式
                lineStyle: {
                    width: 5,
                    color: {
                        //图表样式 折线/饼图/柱状图
                        type: 'linear',
                        //x，y开始起始点
                        x: 0,
                        y: 0,
                        //x2 控制水平方向渐变  y2控制垂直方向渐变
                        x2: 1,
                        y2: 0,
                        //渐变颜色
                        colorStops: [{
                            offset: 0, color: '#14a2f3' // 0% 处的颜色
                        }, {
                            offset: 0.8, color: '#5778ef' // 50% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                //设置折线上的点颜色
                itemStyle: {
                    color: '#4d9ce2',

                },
                //颜色
                areaStyle: {
                    color: {
                        origin: 5000,
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 0.8,
                        x3: 0,
                        y3: 1,
                        colorStops: [{
                            offset: 0, color: '#acd9fb' // 0% 处的颜色
                        }, {
                            offset: 0.8, color: '#eef7fe' // 50% 处的颜色
                        }, {
                            offset: 1, color: '#ffffff' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }
        ]


    }
    // line.setOption(lineOption)
    mychart.setOption(option)
}

//3.薪资分布 -salaryData
function renderSalary(salaryData) {
    const mychart = echarts.init(document.querySelector('#salary'))
    const option = {
        title: {
            text: '班级薪资分布',
            left: '20',
            top: '20'
        },
        tooltip: {
            trigger: 'item',

        },
        legend: {
            top: '90%',
            left: 'center'
        },
        series: [
            {
                name: '班级薪资分布',
                type: 'pie',
                radius: ['60%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                // data: [
                //     { value: 6, name: '1万以下' },
                //     { value: 26, name: '1-1.5万' },
                //     { value: 30, name: '1.5-2万' },
                //     { value: 18, name: '2万以上' },
                // ]
                data: salaryData.map(item => {
                    let num = item.g_count + item.b_count
                    return { value: num, name: item.label }
                })
            }
        ],
        //设置图标颜色
        color: ['#ff9e00', '#2d9afe', '#00bfff', '#00d795']
    }
    mychart.setOption(option)
}

//男女薪资分布
function renderSalarynan(datas) {
    const mychart = echarts.init(document.querySelector('#gender'))
    option = {
        title: [
            {
                text: '男女薪资分布', left: 10, top: 10,
                textStyle: {
                    color: '#535353',
                    fontWeight: 700,
                    fontSize: 14
                }
            },
            {
                subtext: '男生', top: '45%', left: '45%',
                textStyle: {
                    color: '#535353',
                    fontWeight: 500,
                    fontSize: 14
                }
            },
            {
                subtext: '女生', top: '90%', left: '45%',
                textStyle: {
                    color: '#535353',
                    fontWeight: 500,
                    fontSize: 14
                }
            }
        ],
        series: datas.map(function (data, idx) {
            var top = idx * 50;
            return {

                type: 'pie',
                radius: [40, 60],
                top: top + '%',
                height: '50%',
                left: 'center',
                width: 300,
                itemStyle: {
                    borderWidth: 1
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{name|{b}}\n',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < mychart.getWidth() / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points
                    };
                },
                data: data
            };
        }),
        //设置图标颜色
        color: ['#ff9e00', '#2d9afe', '#00bfff', '#00d795']
    };
    mychart.setOption(option)
}

//4.分组数据 -groupData

// function renderGroup(groupData) {

//     const mychart = echarts.init(document.querySelector('#lines'))
//     btns.addEventListener('click', function (e) {
//         // console.log(e.target.innerText)
//         //配置项
//         option = {
//             xAxis: {
//                 type: 'category',
//                 // data: ['范敏', '董敏', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//                 data: groupData[e.target.innerText].map(item => item.name),
//                 axisLine: {
//                     lineStyle: {
//                         color: '#999',
//                         type: 'dashed'
//                     }
//                 }
//             },
//             yAxis: {
//                 type: 'value',
//                 split: {
//                     lineStyle: {
//                         type: 'dashed'
//                     }
//                 }
//             },
//             series: [
//                 //期望
//                 {
//                     // data: [11300, 13200, 11100, 11800, 10200, 110, 130],
//                     data: groupData[e.target.innerText].map(item => item.hope_salary),
//                     type: 'bar'
//                 },
//                 //实际
//                 {
//                     // data: [23700, 20800, 10000, 17300, 21400, 110, 130],
//                     data: groupData[e.target.innerText].map(item => item.salary),
//                     type: 'bar'
//                 }
//             ]
//         };
//         mychart.setOption(option)
//     })

// }

function renderGroup(groupData) {
    const mychart = echarts.init(document.querySelector('#lines'))
    const btns = document.querySelector('#btns')
    //配置项
    option = {
        xAxis: {
            type: 'category',
            // data: ['范敏', '董敏', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: groupData[1].map(item => item.name),
            axisLine: {
                lineStyle: {
                    color: '#999',
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',
            split: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                // data: [11300, 13200, 11100, 11800, 10200, 110, 130],
                data: groupData[1].map(item => item.hope_salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#00d898' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#c3f5e5' // 100% 处的颜色
                        }],
                    }
                }
            },
            {
                // data: [23700, 20800, 10000, 17300, 21400, 110, 130],
                data: groupData[1].map(item => item.salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#17a2f5' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#cfe9fc' // 100% 处的颜色
                        }],
                    }
                }
            }
        ]
    };
    mychart.setOption(option)

    //点击切换分组数据
    btns.addEventListener('click', function (e) {
        //确定触发事件的事件源
        if (e.target.classList.contains('btn')) {
            // console.log(e.target)
            //高亮切换
            //删除类 btn-blue
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            //添加类 btn-blue
            e.target.classList.add('btn-blue')

            //点击不同的组显示不同的数据
            //展示不同分组数据 ->核心是要修改什么？ ->
            // option里面的配置(索引)
            //1.xAxis轴的data值 2.series中对象内data的值
            const index = e.target.innerHTML
            // console.log(index)
            //给option内的配置项 更换数据
            option.xAxis.data = groupData[index].map(item => item.name)
            option.series[0].data = groupData[index].map(item => item.hope_salary)
            option.series[1].data = groupData[index].map(item => item.salary)
            //重新设置配置项，显示图标
            mychart.setOption(option)
        }
    })
}
//5.籍贯分布 -provinceData
function renderProvince(mapData) {
    const mychart = echarts.init(document.querySelector('#map'))
    //因为所有省份都要存在
    //后台返回的数据是，有学生个数的省份
    //后期拿到返回的数据 要把学生个数的datalist中的value
    //学生个数在返回的数据中  value里面 ->把后台value值给datalist的value
    const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
    ]
    //将所有有学生的省份找出来
    dataList.forEach(item => {
        // console.log(item)
        //find 找数组元素 如果能找到返回该数组元素 找不到undefined
        const res = mapData.find(ele => ele.name.includes(item.name))
        // console.log(res)
        if (res) {
            //拿到后台返回的value值给datalist中的value
            item.value = res.value
        }
    })
    const option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
            {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
            },
        ],
    }
    mychart.setOption(option)
}




// //渲染统计数据
// async function getData() {

//     const { data: { overview, year, salaryData, groupData, provinceData } } = await axios('/dashboard')



//     // const token = localStorage.getItem('token')
//     // const { data: { data: {
//     //     overview, year, salaryData, groupData, provinceData
//     // } } } = await axios({
//     //     url: '/dashboard',
//     //     // 请求需要携带token才能拿到数据
//     //     headers: {
//     //         Authorization: token
//     //     }
//     // })

//     // document.querySelector('.salary').innerHTML = overview.salary
//     // document.querySelector('.student_count').innerHTML = overview.student_count
//     // document.querySelector('.age').innerHTML = overview.age
//     // document.querySelector('.group_count').innerHTML = overview.group_count

//     //拿到对象中的属性名放到数组中
//     //console.log(object.keys(overview))

//     Object.keys(overview).forEach((key) => {
//         document.querySelector(`.${key}`).innerHTML = overview[key]
//     })
// }
// getData()